<template>
  <!-- 新增 h2 标签展示列表标题 -->
  <div>
    <h2 v-if="title">{{ title }}</h2>
    <ul>
      <li v-for="(item, index) in data" :key="index">
        <!-- 使用插槽来自定义每个列表项的展示 -->
        <slot :item="item" :index="index">
          <!-- 默认展示，如果没有提供插槽内容，则显示对象的字符串形式 -->
          {{ itemToString(item) }}
        </slot>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

defineProps({
  data: {
    type: Array,
    default: () => []
  },
  // 新增 title 属性
  title: {
    type: String,
    default: ''
  }
});

// 将 item 转换为字符串的方法
const itemToString = (item) => {
  if (typeof item === 'object' && item !== null) {
    return Object.entries(item)
      .map(([key, value]) => `${key}: ${value}`)
      .join(', ');
  }
  return String(item);
};
</script>

<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

h2 {
  margin-bottom: 16px;
}
</style>
